
<template>
    <span class="officespinner">
        <div @click="minusnumberclick" class="officeclass">-</div>
        <input type="number" pattern="[0-9]*" v-on:input="inputchangeNum" class="spinnerinput"  v-model="counter" placeholder=""/>
        <div @click ="addnumberclick" class="officeclass1">+</div>

       </span>
</template>
<script>
    export default {
        name: "officeSpiner",
        data() {
            return {
                counter: 0,
                tapParams: {
                    timer: null,
                    tapStartTime: 0
                },

            }
        },

        props: {
            index:{

                default:'0',
            },
            amounts:{

                default:'0',
            },
            max: {
                default: 0,

            },
            min: {
                default: 0,

            },
            width: {
                validator(value) {
                    return /^(\.|\d+\.)?\d+(px|rem)$/.test(value);
                },
                default: '2rem'
            },
            height: {
                validator(value) {
                    return /^(\.|\d+\.)?\d+(px|rem)$/.test(value);
                },
                default: '.6rem'
            }
        },
        methods: {
            inputchangeNum()
            {

                    // this.counter = 0;

                // if (val > max && max != 0) val = max;
                //
                // if (val % unit > 0) {
                //     val = val - val % unit + unit;
                //     if (val > max && max != 0) val -= unit;
                // }
                //
                // if (val < min) val = min - min % unit;
                //
                // this.counter = val;
                // this.$emit('input', val);

                console.log('改变数据');
                console.log(this.counter);
                if(this.counter===''||this.counter===null)
                {
                    this.counter=0;
                }


                var  string=this.counter.toString();
                if (string.substring(0,1)==='0')
                {
                    this.counter=0;
                }


                if(this.counter<=500)
                {
                    this.$emit('getspinnernumer',{'amounts':this.counter,'index':this.index}); //主动触发selectHead方法，'123'为向父组件传递的数据


                }else
                {
                    this.counter=500;
                    this.$dialog.toast({
                        mes: '不能超过最大值',
                        timeout: 1500
                    });
                    this.$emit('getspinnernumer',{'amounts':this.counter,'index':this.index});
                    return;

                }


            },
            minusnumberclick()
            {

                if (this.counter>0)
                {
                    this.counter--;
                    this.$emit('getspinnernumer',{'amounts':this.counter,'index':this.index});


                }else
                {

                }

            },
            addnumberclick()
            {
                if (this.counter<500)
                {
                    this.counter++;
                    this.$emit('getspinnernumer',{'amounts':this.counter,'index':this.index}); //主动触发selectHead方法，'123'为向父组件传递的数据


                }else
                {
                    this.$dialog.toast({
                        mes: '不能超过最大值',
                        timeout: 1500
                    });
                    return;
                }


            },

        },
        watch: {
            amounts:{
                //注意：当观察的数据为对象或数组时，curVal和oldVal是相等的，因为这两个形参指向的是同一个数据对象
                handler(newValue,oldValue){

                    // console.log('ping数据');
                    // console.log(newValue);
                    this.counter=this.amounts;


                },
                deep:true
            },


        },
        created(){

            this.counter=this.amounts;

        },
        mounted() {
            this.$nextTick(this.init);
        }
    }
</script>

<style scoped>
    .officespinner{
        border:1px solid #eae8e8;
        border-radius:1px;
        display:inline-block;
        overflow:hidden;
        width: 2rem;
        height: 0.6rem;
    }
    .officeclass
    {
        float:left;
        width:30%;
        height:inherit;
        text-align:center;
        font-weight:700;
        font-size: 0.4rem;
        color:white;
        letter-spacing:0;
        position:relative;
        background-color:#e9b778;
        overflow:hidden
    }
    .spinnerinput
    {
        width:40%;
        position:relative;
        left: 0rem;
        border:0px solid #e1e1e1;
        height: 100%;
        font-size: 0.3rem;
        text-align: center;
        color: #a5a6a6;
    }
    .officeclass1
    {
        float:right;
        width:30%;
        height:inherit;
        text-align:center;
        font-weight:700;
        font-size: 0.4rem;
        color:white;
        letter-spacing:0;
        position:relative;
        background-color:#e9b778;
        overflow:hidden
    }


</style>



